<template>
	<div class="charts-page">
		<el-card>
			<el-row>
				<el-col :span="24">
					<HzEchartsLineStack id="line2" ref="line2" style="height: 400px; width: 100%;"/>
				</el-col>
			</el-row>
		</el-card>



		<el-row :gutter="24" style="margin-top: 20px;">
			<el-col :span="12">
				<el-row   style="height: 300px">
					<el-col>
						<el-card>
							<HzEchartsLineBase id="line1" ref="line1" style="height: 300px"/>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="12">
				<el-row   >
					<el-col>
						<el-card>
							<HzEchartsPieBase id="pie1" ref="pie1" style="height: 300px"/>
						</el-card>
					</el-col>
				</el-row>
			</el-col>

		</el-row>
	</div>
</template>
<script setup lang="ts">
import {ref, onMounted,nextTick} from 'vue'
import type HzEchartsPieBase from "/@components/echarts/pie/Hz-Echarts-Pie-Base.vue";
import type HzEchartsLineBase from "/@components/echarts/line/Hz-Echarts-Line-Base.vue";
import type HzEchartsLineStack from "/@components/echarts/line/Hz-Echarts-Line-Stack.vue";
import { getYoloStatistics} from "/@api/yolo_model/hz-system-yolo-model-api";
const pie1 = ref(null);
const line1 = ref(null);
const line2 = ref(null);



const parseToPie = (data: any) => {
	const res = Object.keys(data).map(key => {
		return {
			name: key,
			value: data[key]
		}
	});
	return res
}
const parseToLine = (data: any) => {
	return {
		xData: Object.keys(data),
		yData: Object.values(data)
	}
}

const parseToLineStack = (data: any) => {
	const xData = Object.keys(data);
	const yData = [];
	for (const key in data) {
		const item = data[key];
		for (const category in item) {
			const index = yData.findIndex((value) => value.name === category);
			if (index === -1) {
				yData.push({
					name: category,
					type: 'line',
					stack: 'Total',
					data: [item[category]]
				});
			} else {
				yData[index].data.push(item[category]);
			}
		}
	}
	return {
		xData: xData,
		yData: yData
	}

}

//识别统计
const loadYoLoRecognitionStatistics = async () => {
	const response = await getYoloStatistics({});
	pie1.value?.refreshChart({
		title: '识别类型',
		subtext: '识别类型统计',
		yData: parseToPie(response.data?.statistics || {})
	});
	const lineData = parseToLine(response.data?.date_statistics || {});
	line1.value?.refreshChart({
		title: '识别使用趋势/分',
		xData: lineData.xData,
		yData: lineData.yData
	});
	const lineStackData = parseToLineStack(response.data?.date_category_statistics || {});
	line2.value?.refreshChart({
		title: '识别使用趋势/秒',
		xData: lineStackData.xData,
		yData: lineStackData.yData,
		legendData: lineStackData.yData.map(item => item.name),
	});
};


onMounted(()=> {
	nextTick(()=> {
		loadYoLoRecognitionStatistics();
	})
})


</script>
<style scoped lang="scss">
.charts-page{
	padding: 20px;
}
</style>
